<template>
  <view class="container">
    <!-- formatRichText(obj.advertisement) -->
    <!-- <image src="../../static/advantage.gif" style="width: 100%; height: 100%" mode="aspectFill"></image> -->
    <rich-text :nodes="formatRichText(obj.advertisement)"></rich-text>
    <view style="position: fixed; right: 40rpx; top: 40rpx; color: #ccc; z-index: 99" v-if="show">{{ time + 's' }}</view>
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
      <view class="box">
        <view class="btn" v-if="show">{{ time + 's倒计时' }}</view>
        <view class="btn2" v-else @click="goqifu">去祈福</view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, nextTick, getCurrentInstance } from 'vue';
import { onLoad, onHide, onShow, onUnload } from '@dcloudio/uni-app';
// 获取全局的数据
const proxy = getCurrentInstance().appContext.config.globalProperties;
const http = proxy.$http;
const imgurl = ref('https://prayer.jiangkukeji.cn');
// 基本数据
const popup = ref(null);
const timer = ref(null);
const time = ref(10);
const show = ref(true);
const obj = ref({});
const orderid = ref('');
// 获取设置
const getstting = async () => {
  const res = await http('/user/getSetRes', {}, 'POST');
  console.log('获取配置', res.data);
  time.value = res.data.advertisement_time;
  obj.value = res.data;
  // obj.value.advertisement = obj.value.advertisement.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
};

// 祈福跳转
const goqifu = () => {
  uni.redirectTo({
    url: '/pages/qifu/qifu?orderid=' + orderid.value
  });
};

onLoad((e) => {
  if (e.orderid) {
    orderid.value = e.orderid;
    console.log('广告页面的订单id', orderid.value);
  }
  // 获取配置
  getstting();
  nextTick(() => {
    popup.value.open();
    timer.value = setInterval(() => {
      time.value--;
      if (time.value == 0) {
        popup.value.open();
        show.value = false;
        time.value = obj.value.advertisement_time;
        clearInterval(timer.value);
        timer.value = null;
      }
    }, 1000);
  });
});

onHide(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  popup.value.close();
});
onUnload(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});

// 过滤器
function formatRichText(html) {
  //控制小程序中图片大小
  if (html) {
    let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
      match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
      match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
      match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
      return match;
    });
    newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
      match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
      return match;
    });
    newContent = newContent.replace(/<br[^>]*\/>/gi, '');
    newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
    return newContent;
  }
}
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  // width: 750rpx;
  // height: 1439rpx;
  .box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 750rpx;
    height: 336rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .btn {
      box-sizing: border-box;
      width: 620rpx;
      height: 92rpx;
      line-height: 92rpx;
      text-align: center;
      background: #e1e1e1;
      border-radius: 46rpx;
    }
    .btn2 {
      box-sizing: border-box;
      width: 620rpx;
      height: 92rpx;
      line-height: 92rpx;
      text-align: center;
      background: #ffc2d5;

      border-radius: 46rpx;
    }
  }
}
</style>
